<template>
	<view class="address-manage rf-row-wrapper">
 		<view class="row b-b">
			<text class="tit">客户姓名</text>
			<input
				class="input"
				type="text"
				v-model="order.name"
				@blur="handlenameChange"
				placeholder="客户姓名"
				placeholder-class="placeholder"
			/>
		</view>
		<view class="row b-b">
			<text class="tit">客户手机号</text>
			<input
				class="input"
				v-model="order.mobile"
				@blur="handleMobileChange"
				placeholder="客户手机号" maxlength="18"
				placeholder-class="placeholder"
			/>
		</view>

		<view class="row b-b">
			<text class="tit">车牌号码</text>
			<input
				class="input"
				v-model="order.orderAttr.platNo"
				@blur="handleMobileChange"
				placeholder="车牌号码" maxlength="18"
				placeholder-class="placeholder"
			/>
		</view>

		<view class="row b-b">
			<text class="tit">发动机号</text>
			<input
				class="input"
				v-model="order.orderAttr.engineNo"
				@blur="handleMobileChange"
				placeholder="发动机号" maxlength="18"
				placeholder-class="placeholder"
			/>
		</view>

		<view class="row b-b">
			<text class="tit">VIN</text>
			<input
				class="input"
				v-model="order.orderAttr.vin"
				placeholder="VIN" maxlength="18"
				placeholder-class="placeholder"
			/>
		</view>

		<picker @change="getCarLx" :range="carLxOptions" range-key="dictLabel">
		<view class="row b-b">
			<text class="tit">车型</text>
			<text class="span">{{carLxIndex || carLxIndex===0 ? carLxOptions[carLxIndex].dictLabel : '请选择车型'}}</text>
		</view>
		</picker>

		<picker @change="getColor" :range="colorOptions" range-key="dictLabel">
		<view class="row b-b">
			<text class="tit">颜色</text>
			<text class="span">{{colorIndex || colorIndex===0 ? colorOptions[colorIndex].dictLabel : '请选择颜色'}}</text>
		</view>
		</picker>

		<picker @change="getBrand" :range="emps" range-key="user_name">
		<view class="row b-b">
			<text class="tit">技师</text>
			<text class="span">{{brandIndex || brandIndex===0 ? emps[brandIndex].user_name : '请选择技师'}}</text>
		</view>
		</picker>



		<view class="rf-goods-section">
			<!-- 商品列表 -->
			<!-- <view class="flexs yt-tit b-b">
				<text>配件信息</text>

			</view> -->
			<view class="i-top b-b">
				<text class="time in1line">配件信息</text>

				<navigator url="/pages/product/list_new?source=1" >
					<text
						:class="'text-' + themeColor.name"
						>新增</text>
					</navigator>
			</view>

			<view class="g-item" v-for="(item, index) in order.orderSkus" :key="index">
				<!-- <rf-image :preview="false" :src="item.skuImage"></rf-image> -->
				<image class="rf-image" mode="widthFix" :src="item.url"></image>
				<view class="right">
					<view class="flexs title clamp">
						<text>{{ item.skuName }}</text>
						<text class="state" :class="'text-' + themeColor.name">*{{item.num}}</text>
					</view>
					<!----> 
					<!-- --><text class="flexl spec">服务费：{{item.price }</text>
					<text class="spec">删除</text>
				</view>
			</view>

		</view>

		<button
			class="add-btn"
			:class="'bg-' + themeColor.name"
			:disabled="btnLoading"
			:loading="btnLoading"
			@tap="submit"
		>
			提交
		</button>
		<!--加载动画-->
		<rfLoading isFullScreen :active="loading"></rfLoading>
	</view>
</template>

<script>
/**
 * @des 收货地址列表
 *
 * @author stav stavyan@qq.com
 * @date 2020-03-10 18:00
 * @copyright 2019
 */
import { addressCreate, addressUpdate, addressDetail } from '@/api/userInfo';
import {
  cartItemCount,
  orderCreate,
  orderFreightFee,
  orderPreview,
	orderCreateHt
} from '@/api/product'
import uTable from "uview-ui/components/u-table/u-table";
export default {
	components: {

		uTable
	},
	data() {
		return {
			addressData: {
				name: '',
				mobile: '',
				detailAddress: '',
				address_name: '请选择地址',
				address: '',
				isDefault: false,
				provinceId: '',
				cityId: '',
				countryId: ''
			},
			brandIndex:0,
			carLxIndex:0,
			colorIndex:0,
			orderSku:null,
			order:{
				orderSkus:[],
				orderAttr:{},
			},
			emps:[],
			carLxs:[],
			colorOptions:[],
			carLxOptions:[],
			btnLoading: false,
			multiArray: [[], [], []],
			multiIndex: [0, 0, 0],
			loading: true
		};
	},
	onLoad(options) {
		this.initData(options);
	},
	onShow(){
		console.log('this.orderSku:',this.orderSku);
		if(this.orderSku!=null){
			this.order.orderSkus.push(this.orderSku);
		}
	},
	methods: {
		// 获取选择的地区
		handleGetRegions(e) {
			console.log(e)
			this.addressData.provinceId = e.provinceId;
			this.addressData.cityId = e.cityId;
			this.addressData.countryId = e.countryId;
		},
		// 数据初始化
		async initData(options) {
			let title = '新增订单';
			this.getGoods();
			this.getTypes('color_type');
			this.getTypes('carLx_type');
			uni.setNavigationBarTitle({
				title
			});
		},
		// 获取收货地址
		async getAddressDetail(id) {
			await this.$http
				.get(`${addressDetail}`, {
					id
				})
				.then(async r => {
					this.addressData = await r;
					this.loading = false;
				})
				.catch(() => {
					this.loading = false;
				});
		},

		handlenameChange(e) {
			this.addressData.name = e.detail.value;
		},
		bindAddressDetailsChange(e) {
			this.addressData.detailAddress = e.detail.value;
		},
		handleMobileChange(e) {
			this.addressData.mobile = e.detail.value;
		},
		switchChange(e) {
			this.addressData.isDefault = e.detail.value;
		},
		getBrand(e) {
			this.brandIndex = e.detail.value;
			let id = this.emps[this.brandIndex].user_id;
			this.order.installId = id;
		},
		getColor(e) {
			this.colorIndex = e.detail.value;
			let id = this.colorOptions[this.colorIndex].dictValue;
			this.order.orderAttr.color = id;
		},
		getCarLx(e){
			this.carLxIndex = e.detail.value;
			let id = this.carLxOptions[this.carLxIndex].dictValue;
			this.order.orderAttr.carLx = id;
		},
		getGoods() {
			this.$http.get('/store/TStoreInfo/getUsers').then(r => {
				this.emps = r || [];
				console.log('1111this.goods:', this.emps);
				this.skuIndex = 0;

			});
		},
		getTypes(key) {
			this.$http.get('/dictType?key='+key).then(r => {
				let datas = r || [];
				if(key == 'color_type'){
					this.carLxOptions = datas;
				}else if(key == 'carLx_type'){
					this.colorOptions = datas;
				}

				console.log('colorOptions:', this.colorOptions);

			});
		},
		// 提交
		confirm() {
			let data = this.addressData;
			if (!data.mobile) {
				this.$mHelper.toast('请填写员工身份证号');
				return;
			}
			// if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(data.mobile)) {
			// 	this.$mHelper.toast('请输入正确的手机号码');
			// 	return;
			// }
			this.btnLoading = true;
			if (this.manageType === 'edit') {
				this.handleAddressUpdate(data);
			} else {
				this.handleAddressCreate(data);
			}
		},
		async submit () {

		  const that = this

		  this.btnLoading = true
		  await this.$http
		    .post(`${orderCreateHt}`,
		      JSON.stringify(this.order)
		    )
		    .then(res => {
		      // 订单提交成功
		      console.log(res)
		      uni.redirectTo({
		        url: `/pages/user/shop/index`
		        //	url: `/pages/user/money/success?type=${this.settlement.type}&id=${r.wholesale_id}`
		      })
		    })
		    .catch(() => {
		      this.btnLoading = false
		    })
		},
		async handleAddressUpdate(data) {
			await this.$http
				.put(`${addressUpdate}`, {
				id:data.id,
					name: data.name,
					mobile: data.mobile,
					detailAddress: data.detailAddress,
					isDefault: data.isDefault ? 1 : 0,
					provinceId: data.provinceId,
					cityId: data.cityId,
					countryId: data.countryId
				})
				.then(() => {
					this.btnLoading = false;
					this.$mHelper.toast('收货地址修改成功！');
					this.$mRouter.back();
				})
				.catch(() => {
					this.btnLoading = false;
				});
		},
		async handleAddressCreate(data) {
			await this.$http
				.get(`/saveEmp`, {
					cardid: data.mobile
				})
				.then(() => {
					this.btnLoading = false;
					this.$mHelper.toast('新增成功！');
					this.$mRouter.back();
				})
				.catch(() => {
					this.btnLoading = false;
				});
		}
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
}
.address-manage {
	padding-top: 16upx;
}
</style>
